<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}
			
			#wrap {
				width: 900px;
				margin: 0 auto;
			}
			
			#nav {
				width: 900px;
				height: 100px;
			}
			
			#nav img {
				width: 200px;
				height: 100px;
			}
			
			#nav_left {
				width: 200px;
				height: 100px;
				float: left;
			}
			
			#nav_left img {
				width: 200px;
				height: 100px;
				margin-top: 1px;
			}
			
			#nav_right {
				width: 700px;
				height: 100px;
				display: inline-block;
			}
			
			.nav_s {
				font-size: 12px;
				color: black;
			}
			
			#nav_right .nav_s {
				margin-left: 10px;
			}
			
			#nav_select {
				width: 215px;
				height: 22px;
				float: right;
				margin-right: 10px;
				outline: none;
			}
			
			.gang {
				float: right;
				margin-top: 2px;
				margin-right: 14px;
				font-size: 10px;
				color: black;
				font-weight: bolder;
			}
			
			.sublink a {
				margin-top: 2px;
				text-decoration: none;
				font-size: 13px;
				color: darkgreen;
				float: right;
				font-weight: bolder;
			}
			
			#nav_top {
				width: 700px;
				height: 30px;
				margin-top: 5px;
			}
			
			#nav_bottom {
				width: 700px;
				height: 50px;
				position: relative;
			}
			
			#nav_bottom img {
				width: 700px;
				height: 35px;
			}
			
			#nav_li {
				width: 700px;
				float: left;
				position: absolute;
				left: 0;
				top: 5px;
			}
			
			#nav_li li {
				width: 100px;
				height: 30px;
				list-style: none;
				float: left;
				font-size: 14px;
				color: white;
				margin-left: 36px;
				margin-top: 3px;
			}
			
			#nav_li li:hover {
				color: yellow;
			}
			
			#drop_menu {
				position: absolute;
				left: 170px;
				top: 34px;
				display: none;
				z-index: 999999;
			}
			
			#drop_menu li {
				list-style: none;
				width: 200px;
				height: 35px;
				line-height: 35px;
				background: #0ca251;
				text-shadow: 1px 1px 1px #000;
				border: 1px solid lightgrey;
				border-top: 3px solid #349a48;
			}
			
			#drop_menu li a {
				text-decoration: none;
				color: white;
				font-size: 12px;
				margin-left: 5px;
				font-weight: bolder;
			}
			
			#drop_menu li a:hover {
				color: yellow;
			}
			
			#middle {
				width: 900px;
				height: 480px;
				position: relative;
			}
			
			.middle_l_1 {
				float: left;
				width: 195px;
				height: 100px;
				background-image: url(img/box_0.jpg);
				background-size: 100% 100%;
			}
			
			.middle_l_1:hover {
				background-image: url(img/box_0_0.jpg);
				background-size: 100% 100%;
			}
			
			.middle_l_2 {
				width: 195px;
				height: 100px;
				float: left;
				margin-left: 15px;
				background-image: url(img/box_1.jpg);
				background-size: 100% 100%;
			}
			
			.middle_l_2:hover {
				background-image: url(img/box_1_0.jpg);
				background-size: 100% 100%;
			}
			
			.middle_l_3 {
				width: 195px;
				height: 100px;
				float: left;
				margin-left: 15px;
				background-image: url(img/box_2.jpg);
				background-size: 100% 100%;
			}
			
			.middle_l_3:hover {
				background-image: url(img/box_2_0.jpg);
				background-size: 100% 100%;
			}
			
			.middle_r_1 {
				width: 125px;
				height: 100px;
				margin-left: 25px;
				background-image: url(img/box_4.jpg);
				background-size: 100% 100%;
			}
			
			.middle_r_1:hover {
				background-image: url(img/box_4_0.jpg);
				background-size: 100% 100%;
			}
			
			.middle_r_2 {
				width: 125px;
				height: 100px;
				margin-left: 10px;
				background-image: url(img/box_3.jpg);
				background-size: 100% 100%;
			}
			
			.middle_r_2:hover {
				background-image: url(img/box_3_0.jpg);
				background-size: 100% 100%;
			}
			
			#weiixin {
				width: 250px;
				height: 250px;
			}
			
			.Erweima {
				width: 250px;
				height: 250px;
				position: absolute;
				left: 660px;
				top: 190px;
				z-index: 222;
				background-image: url(img/code.png);
				background-size: 100% 100%;
				display: none;
			}
			
			#middle_left {
				width: 620px;
				height: 350px;
				float: left;
			}
			
			#middle_left_top {
				width: 620px;
				float: left;
				display: none;
			}
			
			.titleSmall {
				width: 90px;
				float: left;
				font-size: 16px;
				color: green;
				font-weight: bolder;
				display: none;
			}
			
			#dianXian {
				margin-top: 10px;
				margin-left: 65px;
				width: 550px;
				height: 2px;
				border-top: 1px dotted lightgray;
				border-bottom: 1px dotted lightgray;
			}
			
			#middle_left_bottom {
				width: 620px;
				height: 200px;
				float: left;
				/*display: none;*/
			}
			
			#middle_left_bottom1 {
				width: 620px;
				height: 200px;
				float: left;
				display: none;
			}
			
			.middle_left_bottom1_p1 {
				margin-top: 20px;
				font-size: 13px;
				color: dimgrey;
				font-weight: bolder;
				/*display: none;*/
			}
			
			.middle_left_bottom1_p2 {
				margin-top: 20px;
				font-size: 13px;
				color: dimgrey;
				font-weight: bolder;
				/*display: none;*/
			}
			
			.middle_left_bottom1_p3 {
				margin-top: 20px;
				font-size: 13px;
				color: dimgrey;
				font-weight: bolder;
				/*display: none;*/
			}
			
			.middle_left_bottom1_p3_a {
				font-size: 13px;
				color: green;
				font-weight: bolder;
			}
			
			.middle_left_bottom_top1 {
				width: 200px;
				height: 130px;
				float: left;
				border-radius: 10px;
			}
			
			.middle_left_bottom_img1 {
				width: 200px;
				height: 130px;
				border-radius: 10px;
			}
			
			.middle_left_bottom_p1 {
				width: 200px;
				text-align: center;
				font-size: 13px;
				color: gray;
				font-weight: bolder;
			}
			
			.middle_left_bottom_top2 {
				width: 200px;
				height: 130px;
				float: left;
				margin-left: 10px;
				border-radius: 10px;
			}
			
			.middle_left_bottom_img2 {
				width: 200px;
				height: 130px;
				border-radius: 10px;
			}
			
			.middle_left_bottom_p2 {
				width: 200px;
				text-align: center;
				font-size: 13px;
				color: gray;
				font-weight: bolder;
			}
			
			.middle_left_bottom_top3 {
				width: 200px;
				height: 130px;
				float: left;
				margin-left: 10px;
				border-radius: 10px;
			}
			
			.middle_left_bottom_img3 {
				width: 200px;
				height: 130px;
				border-radius: 10px;
			}
			
			.middle_left_bottom_p3 {
				width: 200px;
				text-align: center;
				font-size: 13px;
				color: gray;
				font-weight: bolder;
			}
			
			#middle_right {
				float: right;
				width: 270px;
				height: 355px;
				border-radius: 10px;
				background-color: cyan;
			}
			
			#middle_right_top {
				width: 270px;
				height: 210px;
				background-color: pink;
			}
			
			.middle_right_top1 {
				width: 270px;
				height: 60px;
				background-image: url(img/rhu_local_01.jpg);
				background-size: 100% 100%;
			}
			
			.middle_right_top2 {
				width: 270px;
				height: 52px;
				background-image: url(img/rhu_local_03.jpg);
				background-size: 100% 100%;
			}
			
			.middle_right_top3 {
				width: 270px;
				height: 52px;
				background-image: url(img/rhu_local_05.jpg);
				background-size: 100% 100%;
			}
			
			.middle_right_top4 {
				width: 270px;
				height: 52px;
				background-image: url(img/rhu_local_07.jpg);
				background-size: 100% 100%;
			}
			
			#middle_right_bottom {
				width: 270px;
				height: 145px;
				background-image: url(img/rhu_local5.jpg);
				background-size: 100% 100%;
			}
			
			#middle_left_top2 {
				width: 620px;
				height: 300px;
				display: none;
			}
			
			#middle_left_top2 {
				width: 620px;
				height: 350px;
			}
			
			.title2 {
				background-color: teal;
				width: 60px;
				height: 30px;
				float: left;
				color: limegreen;
				font-size: 14px;
				position: absolute;
				left: 0;
				top: 0;
			}
			
			#middle_left_p {
				width: 620px;
				height: 30px;
				background-color: khaki;
				position: absolute;
				left: 0;
				top: 50px;
			}
			
			#middle_left_img {
				width: 620px;
				height: 200px;
				background-color: tomato;
				position: absolute;
				top: 80px;
				left: 0;
			}
			
			#middle_left_img {
				width: 100px;
				height: 50px;
				float: left;
				background-color: yellowgreen;
			}
			
			#middle_left_top1 {
				width: 620px;
				/*display: none;*/
			}
			
			#middle_left_top2 {
				width: 620px;
				/*display: none;*/
			}
			
			.middle_left_top2_title2 {
				float: left;
				font-size: 14px;
				color: limegreen;
				font-weight: bolder;
			}
			
			#middle_left_top2_img2 {
				width: 640px;
				float: left;
			}
			
			#middle_left_top_d1 {
				width: 200px;
				float: left;
				margin-top: 30px;
			}
			
			.middle_left_top2_img2_m1 {
				width: 200px;
				height: 150px;
				float: left;
				border-radius: 10px;
			}
			
			.middle_left_top2_img2_p1 {
				font-size: 13px;
				color: gray;
				font-weight: bolder;
				text-align: center;
			}
			
			.middle_left_top2_Title1 {
				margin-top: 10px;
				margin-bottom: 10px;
				margin-left: 10px;
				width: 620px;
				font-size: 13px;
				color: gray;
				float: left;
			}
			
			#middle_left_top_d2 {
				width: 200px;
				float: left;
				margin-left: 10px;
				margin-top: 30px;
			}
			
			.middle_left_top2_img2_m2 {
				width: 200px;
				height: 150px;
				float: left;
				border-radius: 10px;
			}
			
			.middle_left_top2_img2_p2 {
				font-size: 13px;
				color: gray;
				font-weight: bolder;
				text-align: center;
			}
			
			#middle_left_top_d3 {
				width: 200px;
				float: left;
				margin-left: 10px;
				margin-top: 30px;
			}
			
			.middle_left_top2_img2_m3 {
				width: 200px;
				height: 150px;
				float: left;
				border-radius: 10px;
			}
			
			.middle_left_top2_img2_p3 {
				font-size: 13px;
				color: gray;
				font-weight: bolder;
				text-align: center;
			}
			
			#middle_left_top3 {
				width: 620px;
				/*display: none;*/
			}
			
			.middle_left_top_title3 {
				width: 620px;
				float: left;
				font-size: 16px;
				color: limegreen;
			}
			
			#middle_left_top_t1 {
				margin-top: 10px;
				font-size: 13px;
				color: gray;
				float: left;
				font-weight: bolder;
			}
			
			#middle_left_top3_bottom {
				width: 620px;
			}
			
			.middle_left_top4_img4_w3_bottom_img1 {
				width: 620px;
				height: 500px;
				float: left;
				display: none;
			}
			
			#middle_left_top5 {
				width: 620px;
				display: none;
			}
			
			.middle_left_top_title5 {
				width: 620px;
				float: left;
				font-size: 16px;
				color: limegreen;
			}
			
			#middle_left_top_z1 {
				margin-top: 10px;
				font-size: 13px;
				color: gray;
				float: left;
				font-weight: bolder;
			}
			
			#middle_left_top5_bottom {
				width: 620px;
			}
			
			.middle_left_top4_img5_z3_bottom_img1 {
				width: 620px;
				height: 500px;
				float: left;
				display: none;
			}
			
			#middle_left_top4 {
				width: 620px;
			}
			
			.middle_left_top4_title2 {
				float: left;
				font-size: 14px;
				color: limegreen;
				font-weight: bolder;
			}
			
			#middle_left_top4_img2 {
				width: 640px;
				float: left;
			}
			
			#middle_left_top_w1 {
				width: 200px;
				float: left;
				margin-top: 30px;
			}
			
			.middle_left_top4_img4_w1 {
				width: 200px;
				height: 150px;
				float: left;
				border-radius: 10px;
			}
			
			.middle_left_top4_img4_p1 {
				font-size: 13px;
				color: gray;
				font-weight: bolder;
				text-align: center;
			}
			
			.middle_left_top4_Title1 {
				margin-top: 10px;
				margin-bottom: 10px;
				margin-left: 10px;
				width: 620px;
				font-size: 13px;
				color: gray;
				float: left;
			}
			
			#middle_left_top_w2 {
				width: 200px;
				float: left;
				margin-left: 10px;
				margin-top: 30px;
			}
			
			.middle_left_top4_img4_w2 {
				width: 200px;
				height: 150px;
				float: left;
				border-radius: 10px;
			}
			
			.middle_left_top4_img4_p2 {
				font-size: 13px;
				color: gray;
				font-weight: bolder;
				text-align: center;
			}
			
			#middle_left_top_w3 {
				width: 200px;
				float: left;
				margin-left: 10px;
				margin-top: 30px;
			}
			
			.middle_left_top4_img4_w3 {
				width: 200px;
				height: 150px;
				float: left;
				border-radius: 10px;
			}
			
			.middle_left_top4_img4_p3 {
				font-size: 13px;
				color: gray;
				font-weight: bolder;
				text-align: center;
			}
			
			.middle_left_top4_title4 {
				width: 900px;
				float: left;
				font-size: 16px;
				color: limegreen;
				font-weight: bolder;
			}
			
			.middle_left_top4_Title4 {
				font-size: 13px;
				color: black;
			}
			#middle_left_top1{
				width: 620px;
				/*display:none;*/
			}
			.middle_left_top1_title1{
				color: limegreen;
				font-size: 14px;
				font-weight: bolder;
				float: left;
			}
			
		</style>
	</head>
	<body>
		<div id="wrap">
			<!--首页导航区域-->
			<div id="nav">
				<div id="nav_left">
					<img src="img/logo.png" />
				</div>
				<div id="nav_right">
					<div id="nav_top">
						<span class="nav_s">中国</span>
						<span class="sublink"><a href="">进入全球官网</a></span>
						<span class="gang">|</span>
						<select name="" id="nav_select">
							<option value="" id="selectL">Select Language</option>
							<option value="" id="enSelect">English</option>
							<option value="" id="chSelect">Chinese</option>
						</select>
					</div>
					<div id="nav_bottom">
						<img src="img/绿条.png" />
						<ul id="nav_li">
							<li>新闻动态</li>
							<li id="drop_li">
								美食与营养
							</li>
							<li>加盟流程</li>
							<li>关于我们</li>
							<li>快餐店位置查询</li>
						</ul>
						<!--全效果下拉菜单-->
						<ul id="drop_menu">
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=001" onclick="return checklink(&#39;001&#39;)">超值 Value</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=002" onclick="return checklink(&#39;002&#39;)">经典 Classics</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=003" onclick="return checklink(&#39;003&#39;)">精选 Premium</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=004" onclick="return checklink(&#39;004&#39;)">低脂 Low Fat</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=005" onclick="return checklink(&#39;005&#39;)">百味卷 Wrap</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=006" onclick="return checklink(&#39;006&#39;)">沙拉 Salad</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=007" onclick="return checklink(&#39;007&#39;)">聚餐服务 Catering</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=008" onclick="return checklink(&#39;008&#39;)">饮料和小食 Drinks &amp; Sides</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=009" onclick="return checklink(&#39;009&#39;)">早餐 BREAKFAST</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=010" onclick="return checklink(&#39;010&#39;)">营养 Nutrition</a>
							</li>
							<li>
								<a href="http://www.subway.com.cn/menu.aspx?d=011" onclick="return checklink(&#39;011&#39;)">如何点餐 How To Order</a>
							</li>
						</ul>
					</div>
				</div>
			</div>
			<!--中部区域-->
			<div id="middle">
				<div id="middle_left">
					<div id="middle_left_top">
						<div id="middle_left_top1">
							<p class="middle_left_top1_title1">面积需求</p>
							<div id="middle_left_top1_img1">
								<p class="middle_left_top1_Title1">实际使用面积：标准店60-80平米，但45-120平米都在可考虑范围。</p>
								<div id="middle_left_top1_t1">
									<img src="img/location_04.jpg" alt="" class="middle_left_top1_img1_t1" />
									<p class="middle_left_top1_img1_p1">成都IFS店 45平米</p>
								</div>
								<div id="middle_left_top1_t2">
									<img src="img/location_05.jpg" alt="" class="middle_left_top1_img2_t2" />
									<p class="middle_left_top1_img2_p2">哈尔滨红博店 75平米</p>
								</div>
								<div id="middle_left_top1_d3">
									<img src="img/location_06.jpg" alt="" class="middle_left_top1_img3_t3" />
									<p class="middle_left_top1_img3_p3">天津武清店 120平米</p>
								</div>
							</div>
						</div>
						<div id="middle_left_top2">
							<p class="middle_left_top2_title2">面积需求</p>
							<div id="middle_left_top2_img2">
								<p class="middle_left_top2_Title1">实际使用面积：标准店60-80平米，但45-120平米都在可考虑范围。</p>
								<div id="middle_left_top_d1">
									<img src="img/location_04.jpg" alt="" class="middle_left_top2_img2_m1" />
									<p class="middle_left_top2_img2_p1">成都IFS店 45平米</p>
								</div>
								<div id="middle_left_top_d2">
									<img src="img/location_05.jpg" alt="" class="middle_left_top2_img2_m2" />
									<p class="middle_left_top2_img2_p2">哈尔滨红博店 75平米</p>
								</div>
								<div id="middle_left_top_d3">
									<img src="img/location_06.jpg" alt="" class="middle_left_top2_img2_m3" />
									<p class="middle_left_top2_img2_p3">天津武清店 120平米</p>
								</div>
							</div>
						</div>
						<div id="middle_left_top3">
							<p class="middle_left_top_title3">工程条件要求</p>
							<div id="middle_left_top_t1">
								45KW电量，有符合餐饮条件的上下水。对排油排烟排污没有专项要求。
							</div>
							<div id="middle_left_top3_bottom">
								<img src="img/location_07.jpg" class="middle_left_top2_img2_m3_bottom_img1" />
							</div>
						</div>
						<div id="middle_left_top4">
							<p class="middle_left_top4_title4">面积需求</p>
							<div id="middle_left_top4_img4">
								<p class="middle_left_top4_Title4">实际使用面积：标准店60-80平米，但45-120平米都在可考虑范围。</p>
								<div id="middle_left_top_w1">
									<img src="img/location_04.jpg" alt="" class="middle_left_top4_img4_w1" />
									<p class="middle_left_top4_img4_p1">成都IFS店 45平米</p>
								</div>
								<div id="middle_left_top_w2">
									<img src="img/location_05.jpg" alt="" class="middle_left_top4_img4_w2" />
									<p class="middle_left_top4_img4_p2">哈尔滨红博店 75平米</p>
								</div>
								<div id="middle_left_top_w3">
									<img src="img/location_06.jpg" alt="" class="middle_left_top4_img4_w3" />
									<p class="middle_left_top4_img4_p3">天津武清店 120平米</p>
								</div>
							</div>
						</div>
						<div id="middle_left_top5">
							<p class="middle_left_top_title5">工程条件要求</p>
							<div id="middle_left_top_t5">
								45KW电量，有符合餐饮条件的上下水。对排油排烟排污没有专项要求。
							</div>
							<div id="middle_left_top5_bottom">
								<img src="img/location_11.jpg" class="middle_left_top5_img5_z3_bottom_img1" />
							</div>
						</div>
					</div>
				</div>
				<div id="middle_right">
					<div id="middle_right_top">
						<div class="middle_right_top1"></div>
						<div class="middle_right_top2"></div>
						<div class="middle_right_top3"></div>
						<div class="middle_right_top4"></div>
					</div>
					<div id="middle_right_bottom">
						<div class="middle_right_bottom1"></div>
					</div>
				</div>
				<div class="Erweima">
				</div>
			</div>
		</div>
	</body>
	<script>
		var drop_li = document.getElementById("drop_li");
		var dropMenu = document.getElementById("drop_menu");
		var dropMenuLi = document.querySelectorAll("#drop_menu>li");
		var middle_r_2 = document.getElementsByClassName("middle_r_2")[0];
		var ErweimaDiv = document.getElementsByClassName("Erweima")[0];
		//下拉菜单
		drop_li.onmouseover = function() {
			dropMenu.style.display = "block";
		}
		drop_li.onmouseout = function() {
			dropMenu.style.display = "none";
		}
		dropMenu.onmouseover = function() {
			dropMenu.style.display = "block";
		}
		dropMenu.onmouseout = function() {
			dropMenu.style.display = "none";
		}
		//二维码
//		middle_r_2.onmouseover = function() {
//			ErweimaDiv.style.display = "block";
//		}
//		middle_r_2.onmouseout = function() {
//			ErweimaDiv.style.display = "none";
//		}
		var middle_right_top1 = document.getElementsByClassName("middle_right_top1")[0];
		var middle_right_top2 = document.getElementsByClassName("middle_right_top2")[0];
		var middle_right_top3 = document.getElementsByClassName("middle_right_top3")[0];
		var middle_right_top4 = document.getElementsByClassName("middle_right_top4")[0];
		var middle_left = document.getElementById("middle_left");
	</script>
</html>